
* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 50px auto;
}

.list {
  list-style: none;
  position: relative;
  width: 100%;
  height: 100%;
}

.list .item {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.list .item img {
  width: 100%;
  height: 100%;
}

.list .item.active {
  z-index: 100;
}

.btn {
  /* 布局 */
  position: absolute;
  top: 50%;
  z-index: 1000;
  transform: translateY(-50%);
  /* 样式 */
  width: 30px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.6);
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
}

.btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 1);
}

.btn.left {
  left: 0;
}

.btn.right {
  right: 0;
}
